<template>
  <div class="padding10" >
    <div class="box box-custom">
      <div class="box-header with-border">
        <h3 class="box-title">系统用户管理</h3>
        <button type="button" class="btn btn-custom pull-right" v-on:click="showAddUserDialog">添加用户</button>
      </div>
      <div class="box-body">
      <el-table class="top10" style="width: 100%;"
      :data="usersListData"
      border stripe size='mini' height="480">
        <el-table-column
         prop="username"
         label="用户名"
         width="100">
        </el-table-column>
        <el-table-column
         label="账户类型"
         width="200">
          <template slot-scope="scope">
            {{ $store.getters.getDictionary.userType[scope.row.userType] }}
          </template>
        </el-table-column>
        <el-table-column
         label="所属分组"
         width="200">
          <template slot-scope="scope">
            {{ getOrganizationName(scope.row.organizationId) }}
          </template>
        </el-table-column>
        <!-- el-table-column
         prop="sex"
         label="性别"
         width="100">
        </el-table-column>
        <el-table-column
         prop="role"
         label="角色"
         width="80">
        </el-table-column>
        <el-table-column
         prop="phone"
         label="电话号码"
         width="80">
        </el-table-column>
        <el-table-column
         prop="email"
         label="邮箱"
         width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column -->
        <el-table-column
        label="状态"
        width="60">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ?  '启用' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column
        prop="description"
        label="备注"
        width="100">
        </el-table-column>
        <el-table-column
        label="操作"
        width="300">
          <template slot-scope="scope">
            <!-- @click="handleClick(scope.row)" -->
            <el-button type="text" size="small" @click="showEditUserDialog(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
            <!-- el-button type="text" size="small">权限分配</el-button -->
            <el-button type="text" size="small" @click="showChangePasswordDialog(scope.row)">重置密码</el-button>
            <el-button type="text" size="small" @click="delUser(scope.row.id)"><span class="danger"><i class="el-icon-delete"></i> 删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination v-if="usersTotal>0"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="prev, pager, next, total"
      :total="usersTotal">
      </el-pagination>
    </div>
    </div>
    <el-dialog
      :title="handleUserTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div>
      <form>
        <div class="input-group">
          <span class="input-group-addon">用户名</span>
          <input type="text" class="form-control" v-model="handleUserData.username" v-if="isAddUser"/>
          <span class="form-control" v-else>{{ handleUserData.username }}</span>
        </div>
        <div class="input-group top10" v-if="isAddUser">
          <span class="input-group-addon">密 码</span>
          <input type="password" class="form-control" v-model="handleUserData.password" />
        </div>
        <div class="input-group top10" v-if="isAddUser">
          <span class="input-group-addon">所属分组</span>
          <select class="form-control" v-model="handleUserData.organizationId">
            <option v-for="item in organizationData" :value="item.id">{{ item.name }}</option>
          </select>
        </div>
        <div class="input-group top10" v-else>
          <span class="input-group-addon">所属分组</span>
          <span class="form-control">{{ getOrganizationName(handleUserData.organizationId) }}</span>
        </div>
        <div class="input-group top10" v-if="isAddUser">
          <span class="input-group-addon">账户类型</span>
          <select class="form-control" v-model="handleUserData.userType">
            <option v-for="(item, key) in $store.getters.getDictionary.userType" :value="key">{{item}}</option>
          </select>
        </div>
        <div class="input-group top10" v-else>
          <span class="input-group-addon">账户类型</span>
          <span class="form-control">{{ $store.getters.getDictionary.userType[handleUserData.userType] }}</span>
        </div>
        <!-- div class="input-group top10">
          <span class="input-group-addon">性 别</span>
          <select class="form-control" v-model="handleUserData.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">电话号码</span>
          <input type="text" class="form-control" v-model="handleUserData.phone" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">地 址</span>
          <input type="text" class="form-control" v-model="handleUserData.address" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">证件ID</span>
          <input type="text" class="form-control" v-model="handleUserData.idCard" />
        </div -->
        <div class="input-group top10">
          <span class="input-group-addon">状 态</span>
          <select class="form-control" v-model="handleUserData.status">
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">备注</span>
          <input type="text" class="form-control" v-model="handleUserData.description" />
        </div>
        <!-- div class="input-group top10">
          <label>角色分配：</label>
          <el-checkbox-group v-model="roleIds">
            <el-checkbox v-for="(item, index) in roles" :label="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div -->
        <div class="input-grop top20 center">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="SubmitUserData">提 交</el-button>
        </div>
      </form>
      </div>
    </el-dialog>

    <el-dialog
    title="重置密码"
    :visible.sync="changePWDialog"
    width="50%"
    :before-close="handleClose">
      <ResetPW :user="handleUserData" @close="changePWDialog = false"></ResetPW>
    </el-dialog>
  </div>
</template>
<script>
// 导入修改密码控件
import ResetPW from './ResetPW.vue'
export default {
  name: 'systemUser',
  data () {
    return {
      usersListData: [],
      //机构列表
      organizationData: [],
      // 角色列表
      roles: [],
      // 添加的角色
      roleIds: [],
      // true 添加， false 修改
      isAddUser: false,
      handleUserData: {},
      handleUserTitle: '',
      dialogVisible: false,
      usersTotal: 0,
      page: 1,
      pageSize: 10,
      changePWDialog: false
    }
  },
  prpos: {
  },
  components: {
    ResetPW
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    handleCurrentChange (val) {
      this.page = val
      this.getUsers()
    },
    getUsers () {
      let formData = new FormData()
      formData.append('pageIndex', this.page)
      formData.append('pageSize', this.pageSize)
      formData.append('username', '')
      this.$http.post('api/user/getByPage', formData).then(
        response => {
          this.usersListData = response.data.data.data
          this.usersTotal = response.data.data.totalElements
          // this.page = response.data.data.pageNum
        },
        response => {
          alert(response.body.error ? response.body.error : response.body.message)
          console.log('error', response)
        }
      )
    },
    // 获取机构信息
    getOrganizationData () {
      this.$http.get('organization/getAll').then(
        response => {
          this.organizationData = response.data.data
        }
      )
    },
    showAddUserDialog () {
      this.isAddUser = true
      this.handleUserData = {}
      this.handleUserTitle = '添加用户'
      if (this.organizationData.length < 1) { this.getOrganizationData() }
      if (this.roles.length < 1) { this.getRole() }
      this.roleIds = []
      this.dialogVisible = true
    },
    showEditUserDialog (user) {
      this.isAddUser = false
      this.handleUserData = user
      this.handleUserTitle = '编辑用户'
      if (this.organizationData.length < 1) { this.getOrganizationData() }
      if (this.roles.length < 1) { this.getRole() }
      this.$http.get('api/user/get/' + user.id).then(
        response => {
          this.handleUserData = response.data.data
          this.roleIds = this.handleUserData.roleIds // (this.handleUserData.roleIds ? this.handleUserData.roleIds.split(',') : [])
          this.roleIds.forEach(function (value, index, _this) {
            _this[index] = parseInt(value.id)
          })
          this.dialogVisible = true
        },
        response => {
          alert(response.message)
          console.log(response)
        }
      )
    },
    showChangePasswordDialog (user) {
      this.handleUserData = user
      this.changePWDialog = true
    },
    SubmitUserData () {
      this.handleUserData.roleIds = this.roleIds.join(',')
      this.isAddUser ? this.addUser(this.handleUserData) : this.updateUser()
    },
    updateUser () {
      let formData = new FormData()
      for (let key in this.handleUserData) {
        formData.append(key, this.handleUserData[key])
      }
      this.$http.post('api/user/save', formData).then(
        response => {
          console.log('编辑成功')
          this.dialogVisible = false
          this.handleUserData = {}
          this.getUsers()
        },
        response => {
          alert(response.body.message)
          console.log('error', response)
        }
      )
    },
    addUser (user) {
      let formData = new FormData()
      for (let key in this.handleUserData) {
        formData.append(key, this.handleUserData[key])
      }
      this.$http.post('api/user/save', formData).then(
        response => {
          console.log('添加成功')
          alert(response.data.message)
          this.dialogVisible = false
          this.handleUserData = {}
          this.getUsers()
        },
        response => {
          alert(response.body.error ? (response.body.error + response.body.message) : response.body.message)
          console.log('error', response)
        }
      )
    },
    delUser (id) {
      if (confirm('确认删除？') === false ) return false
      this.$http.get('api/user/delete/' + id).then(
        response => {
          console.log('删除成功')
          this.getUsers()
        },
        response => {
          alert(response.message)
          console.log('error', response)
        }
      )
    },
    getRole () {
      let url = 'api/role/getAll'
      this.$http.get(url).then(
        response => {
          this.roles = response.data.data
        },
        response => {
          alert(response.message)
          console.log('error', response)
        }
      )
    },
    getOrganizationName (id) {
      let name = ''
      this.organizationData.map(
        (item) => {
          if (item.id === id) {
            name = item.name
          }
        }
      )
      return name
    }
  },
  created () {
    this.getOrganizationData()
    this.getUsers()
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-group{margin-bottom: 10px;}
.input-group-addon{min-width: 120px; text-align: right;}
</style>
